<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_2650698_5xqmblfcp1m.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/goodsDetails.css">
    <script src="../js/common.js"></script>
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/api.js"></script>
</head>

<body>
    <div id="yoho-header">
        <div class="tool-wrap">
            <div class="center-content">
                <div class="tool-left">
                    <span class="iconfont icon-hamburgermenu"></span>
                    <a href="#">YOHO!BUY 有货</a>
                    <ul class="yoho-tool-list">
                        <li>
                            <a href="#" class="yoho-group" rel="nofollow" data-en="YOHO!" data-cn="集团官网">YOHO!</a>
                        </li>
                        <li>
                            <a href="#" class="yoho-group" rel="nofollow" data-en="YOHO!BOYS"
                                data-cn="男生潮流">YOHO!BOYS</a>
                        </li>
                        <li>
                            <a href="#" class="yoho-group" rel="nofollow" data-en="YOHO!GIRLS"
                                data-cn="女生潮流">YOHO!GIRLS</a>
                        </li>
                        <li>
                            <a href="#" class="yoho-group" rel="nofollow" data-en="Mars" data-cn="新鲜好去处">Mars</a>
                        </li>
                        <li>
                            <a href="#" class="yoho-group" rel="nofollow" data-en="YO'HOOD" data-cn="潮流嘉年华">YO'HOOD</a>
                        </li>
                    </ul>
                </div>
                <div class="tool-swindle">
                    <span class="iconfont icon-note"></span>
                    <a href="#">关于防诈骗的重要提醒</a>
                </div>
                <div class="tool-right">
                    <span>Hi~</span>
                    <ul>
                        <li id="loginBox">
                            [
                            <a href="./login.html" id="login">请登录</a>
                            ][
                            <a href="./register.html" id="reg">免费注册</a>
                            ]
                        </li>
                        <li>
                            <a href="#">MY有货</a>
                        </li>
                        <li>
                            <span class="iconfont icon-dingdan"></span>
                            <a href="#">我的订单</a>
                        </li>
                        <li>
                            <span class="iconfont icon-shoucang"></span>
                            <a href="#">我的收藏</a>
                        </li>
                        <li>
                            <span class="iconfont icon-icon-"></span>
                            <a href="#">消息</a>
                        </li>
                        <li>
                            <span class="iconfont icon-kefu"></span>
                            <a href="#">客服服务</a>
                        </li>
                        <li>
                            <span class="iconfont icon-weixin"></span>
                            <a href="#">关注有货</a>
                        </li>
                        <li>
                            <span class="iconfont icon-shouji"></span>
                            <a href="#">手机版</a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

        <div class="head-wrap">
            <div class="login-center">
                <div class="login">

                </div>
                <div class="head-right">
                    <form action="" method="GET" id="search-from" class=".clear">
                        <input type="text" class="search-box">
                        <button></button>
                    </form>
                    <div class="go-cart">
                        <span class="iconfont icon-tianchongxing-"></span>
                    </div>
                </div>

            </div>
        </div>

        <div class="nav-wrap">
            <div class="nav-content">
                <ul class="nav">
                    <li><a href="#">新品到着</a></li>
                    <li><a href="#">品牌一览</a></li>
                    <li><a href="#">服饰</a></li>
                    <li><a href="#">鞋履</a></li>
                    <li><a href="#">包装</a></li>
                    <li><a href="#">配色·其他</a></li>
                    <li><a href="#">SALE</a></li>
                    <li><a href="#">证照/协议</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="banner">

    </div>

    <div class="detail-content">
        <div class="detail-center">
            <div class="detail-nav">
                <a href="./index.html">首页</a>
                <span>></span>
                <a href="#">详情页</a>
            </div>

            <div class="detail-main clear   ">
                <div class="main-left">
                    <div class="main-img">
                        <img src="../img/kuzi5.jpg" alt="">
                        <div class="shadow"></div>
                    </div>
                    <div class="thumbs">
                        <ul class="thumbs-list">

                        </ul>
                    </div>
                </div>

                <div class="main-right clear">
                    <div class="blowUp">
                        <img src="../img/kuzi1.jpg" alt="">
                    </div>

                    <h1>THETHING LOW 短袖T恤</h1>
                    <div class="line"></div>
                    <p class="market-price">
                        <span>单&ensp;&ensp;价:</span>
                        <span class="price">￥59</span>
                    </p>
                    <div class="activity-wrap clear">
                        <span class="ac-title">促&ensp;&ensp;销：</span>
                        <ul class="activity ">
                            <li class="promotion-item ">
                                <span class="ac-type">赠品</span>
                                <span class="ac-des ">
                                    <span>满199赠好礼，赠完即止</span>
                                </span>
                            </li>
                            <li class="promotion-item ">
                                <span class="ac-type">赠品</span>
                                <span class="ac-des ">
                                    <span>满99赠好礼，赠完即止</span>
                                </span>
                            </li>
                            <li class="promotion-item ">
                                <span class="ac-type">赠品</span>
                                <span class="ac-des ">
                                    <span>下单赠好礼，赠完即止</span>
                                </span>
                            </li>
                        </ul>
                    </div>

                    <div class="line"></div>

                    <div class="type-chose">
                        <div class="chose-color">
                            <span>颜&ensp;&ensp;色：</span>
                            <div>红色</div>
                        </div>
                        <div class="chose-size">
                            <span>尺&ensp;&ensp;码：</span>
                            <div class="s">S</div>
                            <div class="m">M</div>
                            <div class="xl">XL</div>
                        </div>
                        <div class="chose-num clear">
                            <span>数&ensp;&ensp;量：</span>
                            <div class="inp-wrap">
                                <span class="minus"></span>
                                <input class="buyNum" type="text" value="1">
                                <span class="add">+</span>
                            </div>
                        </div>
                    </div>

                    <div class="line"></div>

                    <button class="joinBtn">
                        <span class="iconfont icon-tianchongxing-"></span>
                        加入购物车
                    </button>
                    <p class="support-service">
                        <span>服务说明：</span>
                        <span>品牌保障</span>
                        <span>支持七天退换货</span>
                    </p>
                    <div class="code-buy">
                        <img src="../img/code.png" alt="">
                        <div>
                            手机客户端
                            <br>
                            扫一扫购买
                        </div>
                    </div>
                </div>
            </div>

            <div class="total-content">
                <div class="tltle">
                    <span>商品信息</span>
                </div>
            </div>
        </div>
    </div>

    <div class="yoho-footer">
        <div class="promise">
            <ul>
                <li>
                    <span class="iconfont icon-iconzhengpin"></span>
                    <span class=" red">100%</span>
                    <span class="rgbf">品牌正品</span>
                </li>
                <li>
                    <span class="icon-qitianwuliyoutuihuan iconfont"></span>
                    <span class=" red">7天</span>
                    <span class="rgbf">无理由退换货</span>
                </li>
                <li>
                    <span class="icon-liaotian iconfont"></span>
                    <a href="#">
                        <span class="red">便捷</span>
                        <span class="rgbf">在线客服</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="footer-help">
            <ul>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>
                <li>
                    <p><span>新手专区</span></p>
                    <P><a href="#">注册登录</a></P>
                    <P><a href="#">购物结算</a></P>
                    <P><a href="#">下单支付</a></P>
                    <P><a href="#">收货评价</a></P>
                </li>

            </ul>
        </div>

        <div class="footer-link">
            <div class="link-left">
                <a href="#">
                    <img src="../img/link1.png" alt="">
                </a>
                <a href="#">
                    <img src="../img/link2.png" alt="">
                </a>
                <a href="#">
                    <img src="../img/link3.png" alt="">
                </a>

            </div>
            <p class="links">
                <a href="#" rel="nofollow">返回首页</a>
                <span>|</span>
                <a href="#" rel="nofollow">YOHO!BUY 有货</a>
                <span>|</span>
                <a href="#" rel="nofollow">新力传媒</a>
                <span>|</span>
                <a href="#" rel="nofollow">联系我们</a>
                <span>|</span>
                <a href="#" rel="nofollow">商家入驻</a>
                <span>|</span>
                <a href="#" rel="nofollow">隐私条款</a>
                <span>|</span>
                <a href="#" rel="nofollow">友情链接</a>
                <span>|</span>
                <a href="#">潮流品牌大全</a>
                <span>|</span>
                <a href="#">潮流品类大全</a>
                <span>|</span>
                <a href="#">潮流产品大全</a>
                <span>|</span>
                <a href="#">潮流资讯</a>
                <span>|</span>
                <a href="#">穿衣搭配(男生版)</a>
                <span>|</span>
                <a href="#">穿衣搭配(女生版)</a>
                <span>|</span>
                <a href="#">潮流人气</a>
                <span>|</span>
                <a href="#">潮流潮品</a>
                <span>|</span>
                <a href="#">潮流视频</a>
                <span>|</span>
                <a href="#">苏公网安备 32010502010132号</a>
                <span>|</span>
                <a target="_blank" href="#">出版物经营许可证</a>
                <span>|</span>
                <a target=" _blank" href="#">苏B2-20120395</a>
                <span>|</span>
                <a target=" _blank" href="#">食品经营许可证</a>
            </p>

            <p class="copyright">
                CopyRight © 2007-2021 南京新与力文化传播有限公司
                <a class="rbg6" href="#">苏ICP备09011225号</a>
                NewPower Co. 版权所有 江苏省南京市建邺区嘉陵江东街18号南京国家广告产业园5栋17，18楼 025-87781000
            </p>
        </div>
    </div>

    <div class="returnTop">
        ↑
    </div>

</body>

<script>
    $(function () {

        var lgc = getCookie("lgc");

        if (lgc) {
            $("#loginBox").html(`${lgc}<button class="quitBtn">退出</button>`).css("color", "red");
        }

        $(".icon-tianchongxing-").css({ cursor: "pointer" }).click(function () {
            location.href = "./cart.html";
        })

        $(".quitBtn").click(function () {
            quit();
        })

        function quit() {
            setCookie("lgc", "", -1);
            location.reload();
        }

        var gid = urlParse().gid;

        if (!gid) {
            location.href = "./goodsList.html";
        }



        $(".main-img").eq(0).mousemove(function (e) {
            $(".shadow").css({ display: "block" });
            $(".blowUp").css({ display: "block" });
            var innerWidth = $(".main-img").innerWidth();
            var innerHeight = $(".main-img").innerHeight();
            var maxWidth = innerWidth - $(".shadow").innerWidth();
            var maxHeight = innerHeight - $(".shadow").innerHeight();
            var x = e.pageX - $(".shadow").innerWidth() / 2 - $(this).offset().left;
            var y = e.pageY - $(".shadow").innerHeight() / 2 - $(this).offset().top;
            if (x <= 0) x = 0;
            if (x >= maxWidth) x = maxWidth;
            if (y <= 0) y = 0;
            if (y >= maxHeight) y = maxHeight;
            $(".shadow").css({ left: x, top: y });
            $(".blowUp img").css({ left: -x * 2, top: - y * 2 })
        }).hover(function () {
            $(".shadow").css({ display: "block" });
            $(".blowUp").css({ display: "block" });
        }, function () {
            $(".shadow").css({ display: "none" });
            $(".blowUp").css({ display: "none" });
        });

        (async function () {
            var { status, detail, list } = await searchGoodsDetails({ gid })
            if (status) {
                var { id, goodsId, goodsPrice, goodsImg, goodsName, smallPicList, bigPicList } = list;
                //left图片渲染
                $(".main-img img").attr("src", goodsImg);
                $(".blowUp img").attr("src", goodsImg);
                $(".price").text("￥" + goodsPrice);
                $(".main-right h1").text(goodsName);

                var html = '';
                //小图片动态生成
                smallPicList.forEach((item, index) => {
                    if (index >= 5) {
                        return false;
                    }
                    html += `<li><img src="${item}"></li>`
                });
                $(".thumbs-list").html(html);
                //预览图切换
                $(".thumbs-list li").click(function () {
                    var index = $(this).index();
                    $(this).css("border", "1px solid red").siblings().css("border", "1px solid rgb(181, 180, 180)")
                    $(".main-img img").attr("src", bigPicList[index]);
                    $(".blowUp img").attr("src", bigPicList[index]);
                })
                //购买数量
                $(".add").click(function () {
                    var goodsNum = $(this).prev().val() * 1 + 1;
                    $(this).prev().val(goodsNum).prev().css({ cursor: "pointer" }).text("-");
                });
                //减号
                $(".minus").click(function () {
                    if ($(this).next().val() <= 1) {
                        $(this).text("").css({ cursor: "no-drop" });
                        return false;
                    }
                    var goodsNum = $(this).next().val() * 1 - 1;
                    goodsNum <= 1 ? $(this).text("").css({ cursor: "no-drop" }) : 0;
                    $(this).next().val(goodsNum);
                });


                $(".joinBtn").click(async function () {
                    var buyNum = $(".buyNum").val();
                    if (!lgc) {
                        if (confirm("您还未登录是否前往登录？")) {
                            location.href = "./login.html?returnCart=" + encodeURIComponent(location.href);
                        } else {
                            return false;
                        }
                    }
                    var { status, detail } = await addCart({ user: lgc, gId: gid, buyNum });
                    if (status) {
                        if (confirm("加入成功，是否前往购物车？")) {
                            location.href = "./cart.html";
                        }
                    }
                })

            }
        })();

        $(window).scroll(function () {

            $(".returnTop").css("display", "block").click(function () {
                window.scrollTo({
                    top: 0,
                    behavior: "smooth"
                })
            })
            if (window.scrollY <= 0) {
                $(".returnTop").css("display", "none")
            }
        })

    })



</script>

</html>